<template>
  <!-- 填报条件 -->
  <div class="condition_container">
    <div class="condition">
      <a-form :form="form" class="input_box">
        <!-- 匿名用户 -->
        <a-form-item class="condition_box" v-if="role == 1">
          <div class="title">组织名称</div>
          <a-input
            placeholder="请填写组织名称"
            v-decorator="['orgId', { rules: [{ required: true, message: '请填写组织名称' }] }]"
          />
          <!-- </div> -->
        </a-form-item>
        <!-- 登录用户 -->
        <div v-else>
          <a-form-item class="condition_box">
            <div class="title">组织名称</div>
            <a-select
              placeholder="请填写组织名称"
              v-decorator="['orgId', { rules: [{ required: true, message: '请填写组织名称!' }] }]"
            >
              <a-select-option value="广目零碳项目研发部">广目零碳项目研发部</a-select-option>
              <a-select-option value="SDG大数据可持续发展中心产品设计部">SDG大数据可持续发展中心产品设计部</a-select-option>
            </a-select>
          </a-form-item>
        </div>

        <a-form-item class="condition_box">
          <div class="title">核算标准</div>
          <j-dict-select-tag
            @change="handleChange"
            type="list"
            dictCode="gm_accounting_standard,standard_name,standard_code"
            placeholder="请选择核算标准"
            v-decorator="['standardCode', { rules: [{ required: true, message: '请选择核算标准!' }] }]"
          />
        </a-form-item>

        <div class="delay" :style="{ height: standards == 1 ? '280px' : '160px' }">
          <div class="condition_box" v-show="standards == 1">
            <a-form-item class="condition_box">
              <div class="title">核算行业</div>
              <j-dict-select-tag
                type="list"
                dictCode="gm_accounting_industry,industry_name,id"
                placeholder="选择核算行业"
                v-decorator="['industryId', { rules: [{ required: true, message: '请选择核算行业!' }] }]"
              />
            </a-form-item>
          </div>
          <transition name="slide-fade">
            <div class="condition_box">
              <a-form-item>
                <div class="title">核算周期</div>
                <div>
                  <a-radio-group v-model="dateType" @change="dateTypeFun">
                    <a-radio value="1">周期填报</a-radio>
                    <a-radio value="2">单日填报</a-radio>
                  </a-radio-group>
                </div>
                <div v-if="dateType == 2">
                  <a-date-picker
                    @change="ondateChange1"
                    format="YYYY-MM-DD"
                    :size="size"
                    v-decorator="['time1', { rules: [{ required: true, message: '请选择核算周期!' }] }]"
                  />
                </div>
                <div v-else>
                  <a-range-picker
                    @change="ondateChange"
                    format="YYYY-MM-DD"
                    :size="size"
                    v-decorator="['time', { rules: [{ required: true, message: '请选择核算周期!' }] }]"
                  />
                </div>
              </a-form-item>
            </div>
          </transition>
        </div>
      </a-form>
    </div>

    <div class="next" @click="next(stepsCurrent + 1)">下一步</div>
  </div>
</template>

<script>
import Vue from "vue";
import bus from "@/bus";
import { Mixin } from "@/mixins/mixin.js";
// import { getInitAddUnitByUnitId, accountingFill,accountingFillBaseInfo } from '@/api/api'
export default {
  mixins: [Mixin],
  data() {
    return {
      date: null,

      model: {
        status: 1
      },
      dateType: "1", //1为周期 2为单日
      role: 1, //1 匿名用户 2正常用户
      size: "default",
      form: this.$form.createForm(this, { name: "condition" }),
      standards: null
    };
  },
  mounted() {},
  methods: {
    dateTypeFun(e) {
      this.date = null;
    },
    ondateChange1(date, dateString) {
      this.date = dateString;
    },
    ondateChange(date, dateString) {
      this.date = dateString;
    },
    handleChange(value) {
      if (value == "NDRC") {
        this.standards = 1;
      } else {
        this.standards = 2;
      }
    },
    next(val) {
      this.form.validateFields((err, param) => {
        if (this.dateType == "1") {
          param.startTime = this.date[0];
          param.endTime = this.date[1];
        } else {
          param.fillingTime = this.date;
        }
        if(this.cycleId){
           param.id = this.cycleId
        }
        if (!err) {
          bus.$emit("emitAccountingTask", param, val);
        }
      });
    }
  }
};
</script>

<style lang="scss">
@media screen and (min-width: 1200px) {
  .condition_container {
    text-align: left;
    .delay {
      transition-delay: 0.3s !important;
      transition: 0.3s !important;
    }
    .condition {
      .condition_box {
        margin-bottom: 30px;
        .title {
          margin-right: 8px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-size: 22px;
          font-weight: 700;
          line-height: 1.2;
          margin-bottom: 12px;
        }
        .ant-input {
          height: 46px;
          border: none;
          width: 360px;
          padding: 0 10px;
          line-height: 46px;
        }
        .ant-select-selection {
          border: none;
        }
        .ant-select-selection--single {
          height: 46px;
          width: 360px;
        }
        .ant-select-selection__rendered {
          line-height: 46px;
          margin-right: 24px !important;
        }
      }
    }
    .next {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 3px;
      height: 48px;
      text-decoration: none;
      font-size: 16px;
      cursor: pointer;
      outline: none;
      min-width: 140px;
      padding: 0 16px;
      font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
        BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
        Helvetica Neue, sans-serif;
      font-weight: 600;
      line-height: 1;

      background-image: linear-gradient(
        270deg,
        rgba(80, 186, 243, 0.35),
        #50baf3,
        #50baf3,
        rgba(80, 186, 243, 0.35)
      );
      background-size: 200% 100%;
      color: #fff;
      cursor: pointer;
      transition: background-position 0.8s;
      &:hover {
        background-position: 100% 50%;
      }
    }
  }
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
  .condition_container {
    text-align: left;
    .delay {
      transition-delay: 0.3s !important;
      transition: 0.3s !important;
    }
    .condition {
      .condition_box {
        margin-bottom: 30px;
        .title {
          margin-right: 8px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-size: 22px;
          font-weight: 700;
          line-height: 1.2;
          margin-bottom: 12px;
        }
        .ant-input {
          height: 46px;
          border: none;
          width: 360px;
          padding: 0 10px;
          line-height: 46px;
        }
        .ant-select-selection {
          border: none;
        }
        .ant-select-selection--single {
          height: 46px;
          width: 360px;
        }
        .ant-select-selection__rendered {
          line-height: 46px;
          margin-right: 24px !important;
        }
      }
    }
    .next {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 3px;
      height: 48px;
      text-decoration: none;
      font-size: 16px;
      cursor: pointer;
      outline: none;
      min-width: 140px;
      padding: 0 16px;
      font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
        BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
        Helvetica Neue, sans-serif;
      font-weight: 600;
      line-height: 1;

      background-image: linear-gradient(
        270deg,
        rgba(80, 186, 243, 0.35),
        #50baf3,
        #50baf3,
        rgba(80, 186, 243, 0.35)
      );
      background-size: 200% 100%;
      color: #fff;
      cursor: pointer;
      transition: background-position 0.8s;
      &:hover {
        background-position: 100% 50%;
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  .condition_container {
    text-align: left;
    .delay {
      transition-delay: 0.3s !important;
      transition: 0.3s !important;
    }
    .condition {
      .condition_box {
        margin-bottom: 30px;
        .title {
          margin-right: 8px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-size: 22px;
          font-weight: 700;
          line-height: 1.2;
          margin-bottom: 12px;
        }
        .ant-input {
          height: 46px;
          border: none;
          width: 360px;
          padding: 0 10px;
          line-height: 46px;
        }
        .ant-select-selection {
          border: none;
        }
        .ant-select-selection--single {
          height: 46px;
          width: 360px;
        }
        .ant-select-selection__rendered {
          line-height: 46px;
          margin-right: 24px !important;
        }
      }
    }
    .next {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 3px;
      height: 48px;
      text-decoration: none;
      font-size: 16px;
      cursor: pointer;
      outline: none;
      min-width: 140px;
      padding: 0 16px;
      font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
        BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
        Helvetica Neue, sans-serif;
      font-weight: 600;
      line-height: 1;

      background-image: linear-gradient(
        270deg,
        rgba(80, 186, 243, 0.35),
        #50baf3,
        #50baf3,
        rgba(80, 186, 243, 0.35)
      );
      background-size: 200% 100%;
      color: #fff;
      cursor: pointer;
      transition: background-position 0.8s;
      &:hover {
        background-position: 100% 50%;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .condition_container {
    text-align: left;
    .delay {
      transition-delay: 0.3s !important;
      transition: 0.3s !important;
    }
    .condition {
      .condition_box {
        margin-bottom: 30px;
        .title {
          margin-right: 8px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-size: 22px;
          font-weight: 700;
          line-height: 1.2;
          margin-bottom: 12px;
        }
        .ant-input {
          height: 46px;
          border: none;

          padding: 0 10px;
          line-height: 46px;
        }
        .ant-select-selection {
          border: none;
        }
        .ant-select-selection--single {
          height: 46px;
        }
        .ant-select-selection__rendered {
          line-height: 46px;
          margin-right: 24px;
        }
      }
    }
    .next {
      margin: auto;
      text-align: center;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      width: 100%;
      border-radius: 3px;
      height: 48px;
      line-height: 48px;
      text-decoration: none;
      font-size: 16px;
      cursor: pointer;
      outline: none;
      // min-width: 140px;
      // padding: 0 16px;
      font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
        BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
        Helvetica Neue, sans-serif;
      font-weight: 600;

      background-image: linear-gradient(
        270deg,
        rgba(80, 186, 243, 0.35),
        #50baf3,
        #50baf3,
        rgba(80, 186, 243, 0.35)
      );
      background-size: 200% 100%;
      color: #fff;
      cursor: pointer;
      transition: background-position 0.8s;
      &:hover {
        background-position: 100% 50%;
      }
    }
  }
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(20px);
  opacity: 0;
}
</style>